<template>
    <el-dialog
            top="6vh"
            v-bind="$attrs"
            :show-close="isHasCloseBtu"
            @close="cancelResult"
            :visible = "isShow_Popup"
            custom-class="VonDialog"
            class="isShowSubmitDivision_Popup_two"
            :close-on-click-modal="closeByModal"
            :close-on-press-escape="true"
    >
        <span slot="footer" class="dialog-footer"  v-if="isShowFooter">
            <el-button
                    v-if="isShowCommitButton"
                    type="primary"
                    @click="commitResult"
                    style="margin-right: 40px"
                    size="mini">
                {{successText}}
            </el-button>
            <el-button
                    v-if="isShowCancelButton"
                    @click="cancelResult"
                    size="mini">
                {{cancelText}}
            </el-button>
            <!--【重打】【放弃】单独加按钮-->
             <el-button
                 v-if="isHasOtherFunction"
                 @click="triggerOtherFunction_abandon"
                 size="mini">
                放弃
            </el-button>
            <el-button
                v-if="isHasOtherFunction"
                @click="triggerOtherFunction_relay"
                size="mini">
                重打
            </el-button>
        </span>
        <span slot="title">
            <div class="attention">{{title}}</div>
        </span>
        <div class="content">
            <slot name="content"></slot>
            <img v-if="imgType == 'stop'" :src="stop" alt="">
            <img v-if="imgType == 'pass'" :src="pass" alt="">
        </div>
    </el-dialog>
</template>

<script>
  import stop from '../../assets/workStation/stop.jpg'
  import pass from '../../assets/workStation/pass.png'
  export default {
    name: "VonDialog",
    data(){
      return{
        stop,
        pass,
      }
    },
    props:{
      closeByModal:{
        type: Boolean,
        default: true
      },
      imgType:{
        type:String,
        default:''
      },
      testerTab:{
        type:Array,
        default(){
          return []
        }
      },
      /*是否有 叉号 */
      isHasCloseBtu:{
        type:Boolean,
        default:true
      },
      /*是否有【确认】【取消】之外的功能*/
      isHasOtherFunction:{
        type:Boolean,
        default:false
      },
      /*是否展示确定按钮*/
      isShowCommitButton:{
        type:Boolean,
        default:true
      },
      /*是否展示取消按钮*/
      isShowCancelButton:{
        type:Boolean,
        default:true
      },
      /* 是否展示底部 */
      isShowFooter:{
        type:Boolean,
        default:true
      },
      /*弹窗开关*/
      isShow_Popup:{
        type:Boolean,
        default:true
      },
      /*弹窗标题*/
      title:{
        type:String,
        default:'标题'
      },
      /*成功按钮 文字*/
      successText:{
        type:String,
        default:'确定'
      },
      /*取消按钮 文字*/
      cancelText:{
        type:String,
        default:'取消'
      },
    },
    methods:{
      commitResult(){
        this.$emit('commitResult');
      },
      cancelResult(){
        this.$emit('cancelResult');
      },
      triggerOtherFunction_abandon(){
        this.$emit('triggerOtherFunction_abandon');
      },
      triggerOtherFunction_relay(){
        this.$emit('triggerOtherFunction_relay');
      },
    },
    created() {
      if(this.testerTab.length > 0){
        this.tabPosition = this.testerTab[0].index;
      }
    },
    watch:{
      tabPosition(newVal,oldVal){
        let index = newVal - 1;
        let CurrentTab = this.testerTab[index].key;
        this.$emit('changeCurrentTab',CurrentTab);
      }
    }
  }
</script>
<style scoped>
    .isShowSubmitDivision_Popup_two >>> .el-dialog__footer{
        text-align: center;
    }
    .isShowSubmitDivision_Popup_two >>> .el-dialog__body{
        padding: 0 20px  10px;
    }
</style>
<style scoped lang="scss">
    /deep/.VonDialog{
        width: 600px;
        min-height: 420px;
        background: linear-gradient(150deg, #302F43, #43556E);
        border-radius: 10px;
    }
    /*弹窗 start*/
    .isShowSubmitDivision_Popup_two{
        .dialog-footer{
            position: absolute;
            bottom: 10px;
            left: 50%;
            transform: translateX(-50%);
        }
        .attention{
            min-width: 48px;
            height: 24px;
            line-height: 24px;
            color: white;
            font-size: 16px;
            text-align: left;
            font-family: PingFangSC-Medium;
            margin-bottom: 12px;
        }
        .paragraph1{
            height: 20px;
            line-height: 20px;
            color: rgba(0, 0, 0, 0.7);
            font-size: 14px;
            text-align: justify;
            font-family: PingFangSC-Regular;
            padding: 10px 0;
            span{
                color: orange;
            }
        }
        .paragraph2{
            padding: 20px 0;
            height: 20px;
            line-height: 20px;
            color: rgba(0, 0, 0, 0.5);
            font-size: 12px;
            text-align: left;
            font-family: PingFangSC-Regular;
        }
        .content{
            min-height: 300px;
            margin: 10px 0;
        }
    }
    /*弹窗end*/
</style>
